<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style/timing-function.css">
</head>

<body>
    <h3>animation-timing-function演示</h3>
    <div class="timing-function-ex">
        <div class="time">
            <p>时间轴</p>
            <div class="time-ex">
                <div class="time-box"></div>
            </div>
        </div>
        <div class="linear ex">
            <p>linear示例</p>
            <div class="linear-box ex-box">动画从头到尾的速度是相同的</div>
        </div>
        <div class="ease ex">
            <p>（默认值）ease示例</p>
            <div class="ease-box ex-box">动画以低速开始，然后加快，在结束前变慢</div>
        </div>
        <div class="ease-in ex">
            <p>ease-in示例</p>
            <div class="ease-in-box ex-box">动画以低速开始</div>
        </div>
        <div class="ease-out ex">
            <p>ease-out示例</p>
            <div class="ease-out-box ex-box">动画以低速结束</div>
        </div>
        <div class="ease-in-out ex">
            <p>ease-in-out示例</p>
            <div class="ease-in-out-box ex-box">动画以低速开始和结束</div>
        </div>
        <div class="cubic-bezier ex">
            <p>cubic-bezier(n,n,n,n)示例</p>
            <div class="cubic-bezier-box ex-box">在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值</div>
        </div>
    </div>
</body>

</html>